<template>
        <div>
                <h4>自定义hook----提高代码到复用（mixis）</h4>
                <div>vue-hook-userAttr: {{attr.color}}</div>
                <hr>
                <h5>自定义hook</h5>
                <img src="../assets/img.png" alt="" srcset="" class="img">
                <img src="" alt="" ref="myImg" class="myimg">
        </div>
</template>
    
<script setup lang='ts'>
import { onMounted, useAttrs, useSlots } from "@vue/runtime-core";
import { ref } from "vue";
import imgtobase64 from '../hooks/imgtobase64';
let attr = useAttrs();
let solts = useSlots();
console.log('useAttrs=>', attr);
let myImg = ref(null);
imgtobase64('.img').then(res => {
        myImg.value.src = res.BaseUrl;
        console.log('imgtobase64:', res, myImg.value);
})

</script>
<style>
    .img {
            width: 200px;
            height: 150px;
    }
    .myimg {
            width: 300px;
            height: 260px;
            background-color: antiquewhite;
    }
</style>